<template>
<div class="testCodeCoverage">
	<div id="charts" style="width:'100%',height:'3.54rem'"></div>
	<!--<div id="main" :style="{width:'100%',height:'3.54rem'}"></div>-->
	<!--<div id="chart" :style="width:'100%',height:'3.54rem'"> <!--ref="pieChart" -->
	<!-- 统计图表展示 -->
	<!--</div>-->
	<div>
		<el-col :span="10">
			<m-piechart 
				:echartStyle="coverage.style" 
				:titleText="coverage.title"
				:tooltipFormatter="coverage.toolFormat" 
				:seriesName="coverage.seriesName" 
				:opinion="coverage.optName" 
				:opinionData="coverage.optData" 
				v-on:currentEchartData="getEchartData"></m-piechart>
		</el-col>
		<el-col :span="10">
			<m-piechart 
				:echartStyle="errRate.style" 
				:titleText="errRate.title"
				:tooltipFormatter="errRate.toolFormat" 
				:seriesName="errRate.seriesName" 
				:opinion="errRate.optName" 
				:opinionData="errRate.optData" 
				v-on:currentEchartData="getEchartData"></m-piechart>
		</el-col>
	</div>
	<!--<div>
		<el-col :span="24">
			<m-linechart 
				:echartStyle="coverage.style" 
				:textlink='barlink'
                :xname='xname'
                :yname='yname'
                :bardata='bardata'</m-linechart>
		</el-col>
	</div>-->
</div>
	
</template>
<script>
	import {
		Message
	} from 'element-ui';
	import soDic from '../../components/soDic.vue'
	import mPiechart from '../../components/pieCharts.vue'
	import mLinechart from '../../components/lineCharts.vue'
//	// 引入 ECharts 主模块
//	var echarts = require('echarts/lib/echarts');
//	// 引入柱状图
//	require('echarts/lib/chart/bar');
//	// 引入提示框和标题组件
//	require('echarts/lib/component/tooltip');
//	require('echarts/lib/component/title');
export default {
	name: 'Bank',
	data() {
		return {
			coverage:{
				title:'水果销售统计',
				toolFormat:'销售数量',
				seriesName:'销售统计',
				optName:['香蕉','苹果','橘子'],
				optData:[
				    {value:3, name:'香蕉'},
				    {value:3, name:'苹果'},
				    {value:3, name:'橘子'}
				],
				style: {
					height: '300px'
				}
			},
			errRate:{
				title:'水果销售统计',
				toolFormat:'销售数量',
				seriesName:'销售统计',
				optName:['香蕉','苹果','橘子','地瓜'],
				optData:[
				    {value:3, name:'香蕉'},
				    {value:3, name:'苹果'},
					{value:3, name:'地瓜'},
				    {value:3, name:'橘子'}
				],
				style: {
					height: '300px'
				}
			},
			quantity:{
				style: {
					height: '700px'
				}
			}
		}
	},
	components: {
		mPiechart,
		mLinechart
	},
	computed: {},
	methods: {
		getEchartData(val){
        	console.log(val);
		},
		getDatas(){
			console.log(dataList);
		}
	},
	mounted() {
		getDatas()
		/*ECharts图表*/
		/*var pieChart = echarts.init(document.getElementById('main'));
		pieChart.setOption({
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: '55%',
				itemStyle: {
					normal: {
						// 阴影的大小
						shadowBlur: 200,
						// 阴影水平方向上的偏移
						shadowOffsetX: 0,
						// 阴影垂直方向上的偏移
						shadowOffsetY: 0,
						// 阴影颜色
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				},
				data: [{
					value: 400,
					name: '搜索引擎'
				}, {
					value: 335,
					name: '直接访问'
				}, {
					value: 310,
					name: '邮件营销'
				}, {
					value: 274,
					name: '联盟广告'
				}, {
					value: 235,
					name: '视频广告'
				}]
			}]
		})*/
	}
}</script>
<style>
.fl{
	float: left;
}
.testCodeCoverage a{
	color: #20a0ff;
	text-decoration: none;
}
.dic-breadcrumb {
	margin-top: 15px;
	height: 20px;
	line-height: 20px;
	font-size: 16px;
}
.dic-pagination {
	float: right;
	margin-top: 15px;
}
</style>